import React, { useEffect, useState } from 'react';
import { NavigationProp, RouteProp } from '@react-navigation/native';
import { useReactive } from 'ahooks';
import { StyleSheet, Button, TouchableOpacity, View, Text, Image, TextInput } from 'react-native';
import { CommonStyle } from '../../../common/commonStyle.ts';
import { Loading } from '../../../component/LoadingOverlay.tsx';
import { useToast } from 'react-native-toast-notifications';
import to from '../../../utils/to.ts';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import HomeRequest from '../../../request/homeRequest.ts';

interface IHealthClockProps {
  navigation: NavigationProp<any, 'healthClock'>;
  route: RouteProp<{ healthClock: any }, 'healthClock'>;
}

interface IData {
  describes?: string;
  healthState?: number;
  showOverlay: boolean;
}

const HealthClock: React.FC<IHealthClockProps> = ({ navigation, route }) => {
  const data = useReactive<IData>({
    describes: '',
    healthState: 0,
    showOverlay: false,
  });
  const toast = useToast();

  const list = [
    {
      state: 1,
      name: '良好',
      imgUrl: 'https://pic.kanglailab.com/common/satisfaction.png',
    },
    {
      state: 2,
      name: '一般',
      imgUrl: 'http://pic.kanglailab.com/common/normalsatisfaction.png',
    },
    {
      state: 3,
      name: '不好',
      imgUrl: 'http://pic.kanglailab.com/common/dissatisfaction.png',
    },
  ];

  const setState = (state: number) => {
    data.healthState = state;
    if (state != 3) {
      submitState();
    }
  };

  const submitState = () => {
    if (data.healthState == 3 && !data.describes) {
      toast.show('请填写描述', { placement: 'bottom' });
    } else {
      Loading.show('加载中');
      HomeRequest.SetHealthClockState({
        describes: data.describes,
        healthState: data.healthState,
      })
        .then((res) => {
          Loading.hide();
          if (res.data) {
            toast.show('操作成功！', { placement: 'bottom' });
          }
        })
        .catch((error) => {
          Loading.hide();
        });
    }
  };

  const setVal = (e: string) => {
    data.describes = e;
  };

  return (
    <View style={{ height: '100%', backgroundColor: 'white' }}>
      <View style={styles.title}>
        <Text style={styles.titleText}>请选择今日健康状态</Text>
      </View>
      <View style={styles.flexView}>
        {list.map((item, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => {
              setState(item.state);
            }}
          >
            <Image
              style={styles.imgClass}
              source={{
                uri: item.imgUrl,
              }}
            />
            <Text style={styles.imgText}>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </View>
      {data.healthState == 3 && (
        <View style={{ marginTop: 30, alignItems: 'center' }}>
          <TextInput
            onChangeText={(e) => {
              setVal(e);
            }}
            placeholder="请填写描述"
            style={styles.textAreaView}
            multiline={true}
            numberOfLines={6}
          ></TextInput>
          <TouchableOpacity style={styles.button} onPress={submitState}>
            <Text style={styles.buttonText}>提交</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  title: {
    width: '100%',
    justifyContent: 'center',
    marginTop: 20,
  },
  titleText: {
    color: '#ff7b15',
    fontSize: 24,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  flexView: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'white',
    alignItems: 'center',
    marginTop: 10,
  },
  imgClass: {
    width: 100,
    height: 100,
  },
  imgText: {
    textAlign: 'center',
    fontSize: 20,
    color: '#ff7b15',
    fontWeight: 'bold',
  },
  textAreaView: {
    width: '90%',
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 8,
    textAlignVertical: 'top',
  },
  button: {
    width: 200,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ff7b15',
    marginTop: 20,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

export default HealthClock;
